<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>森海塞尔</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/banner.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./swiper-master/package/swiper-bundle.min.css" />
    
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="jianjianhead-size">
            <div class="jianjian-headsizebar">
                <div>
                    <a href="/">
                        <img class="jianjian-img" src="./images/index/jianjian-logo.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="/list.html"><span>所有商品</span></a>
                </div>
                <div>
                    <a href="#"><span>新品</span></a>
                </div>
                <div>
                    <a href="#"><span>无线</span></a>
                </div>
                <div>
                    <a href="#"> <span>HiFi</span></a>
                </div>
                <div>
                    <a href="#"><span>降噪</span></a>
                </div>
                <div>
                    <a href="#"><span>耳机配件</span></a>
                </div>
                <div>
                    <a href="#"><span>会员待遇</span></a>
                </div>
                <div>
                    <a href="/activity.html"><span>企业购</span></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="新品上市">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-yonghu">
                            <img src="./images/index/用户.png">
                            <ul class="jianjian-yonghuyc">
                                <!-- 登录状态不同样式 -->
                                <script id="head-login" type="text/html">
                                    {{if uid}}
                                    <div>
                                        <li class="item first">
                                            <span style="font-size: 16px;">欢迎<label
                                                    style="color: #0096D1;">{{uname}}</label></span>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">个人中心</a>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">我的订单</a>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li class="item">
                                            <button onclick="back()" class="jianjian-btn2">退出登录</button>
                                        </li>
                                    </div>
                                    {{else}}
                                    <div>
                                        <li>
                                            <p style="font-size: 5px;">已是会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn">登录</button>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li>
                                            <p style="font-size: 5px;">注册会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn2">注册</button>
                                        </li>
                                    </div>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-gouwuche">
                            <img src="./images/index/购物车.png" alt="">
                            <ul class="jianjian-gouwucheyc">
                                <!-- 购物车不同状态 -->
                                <script id="head-cart" type="text/html">
                                    {{if data}}
                                    {{each data}}
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <div>
                                                <img class="jianjian-img-1" src="{{$value.img1}}">
                                            </div>
                                            <div class="product_name">
                                                {{$value.pname}}
                                            </div>
                                            <div>
                                                <p style="font-size: 16px;">¥{{$value.price}}</p>
                                            </div>
                                            <div class="jianjian-yc">
                                                <a href="javascript:;" onclick="cart_delete({{$value.cart_id}})">
                                                    <img src="./images/index/删 除.png">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                    <li>
                                        <hr>
                                    </li>
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <span>共{{allPnum}}件商品</span>
                                            <span style="color: #36d; font-size: 18px;">¥{{allPrice}}</span>
                                        </div>
                                    </li>
                                    <li>
                                        <button onclick="go_cart()" class="btn-gouwuche">结算</button>
                                    </li>
                                    {{else}}
                                    <li><img src="./images/index/购物车 (1).png"></li>
                                    <li>
                                        <p style="font-size: 9px; color: grey;">您的购物车还没有商品，赶紧选购吧~</p>
                                    </li>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jianjianhead-sizeyc">
            <div class="jianjian-headsizebaryc">
                <div>
                    <a href="#"><img src="./images/index/jianjian-logo.png"></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="IE 100 PRO">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                    <p style="color: gray; font-size: 15px;">大家都在搜</p>
                    <div class="jianjian-text">
                        <a href="#">
                            <p>新品</p>
                        </a>
                        <a href="#">
                            <p>MOMENTUM</p>
                        </a>
                        <a href="#">
                            <p>游戏</p>
                        </a>
                        <a href="#">
                            <p>GSP600</p>
                        </a>
                        <a href="#">
                            <p>真无线二代</p>
                        </a>
                        <a href="#">
                            <p>IE800</p>
                        </a>
                    </div>
                </div>
                <div>
                    <a id="close" href="javascript:;">
                        <img src="./images/index/叉.png">
                    </a>
                </div>
            </div>
        </div>

    </header>

    <!-- 轮播图引入 -->
    <div>
        <section class="banner" id="banner">
            <ul id="carousel_list" class="carousel_list">
              <li><img src="./images/index/banner2.jpg" alt="" /></li>
              <li><img src="./images/index/banner1.jpg" alt="" /></li>
              <li><img src="./images/index/banner3.jpg" alt="" /></li>
              <li><img src="./images/index/banner1.jpg" alt="" /></li>
              <li><img src="./images/index/banner2.jpg" alt="" /></li>
            </ul>
            <ol class="circles" id="circle_ol">
              <li data-n="0" class="current"></li>
              <li data-n="1"></li>
              <li data-n="2"></li>
              <li data-n="3"></li>
              <li data-n="4"></li>
            </ol>
            <div class="center-wrap">
              <a href="javascript:;" id="left_btn" class="leftbtn"></a>
              <a href="javascript:;" id="right_btn" class="rightbtn"></a>
            </div>
          </section>
    </div>
    <!--  -->
    <div class="row no-gutters mt-5">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-7 pr-xl-2">
            <div><img class="w-100" src="./images/index/a真无线.jpg" alt="" /></div>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-5">
            <div class="w-100 row no-gutters">
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-12 w-100 p-0">
                    <img class="w-100" src="./images/index/22.jpg" alt="" />
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-12 w-100 index-div1-mat p-0">
                    <img class="w-100" src="./images/index/a33.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
    <div class="row no-gutters mt-lg-2">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-5">
            <div class="row no-gutters index-div1-wb index-div2-he">
                <div class="index-block-b">
                    <img class="" src="./images/index/icon-39.png" alt="" />
                    <p>免费定制</p>
                </div>
                <div class="index-block-b">
                    <img class="" src="./images/index/icon-41.png" alt="" />
                    <p>免费定制</p>
                </div>
                <div class="index-block-b">
                    <img class="" src="./images/index/icon-43.png" alt="" />
                    <p>免费定制</p>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-7 pl-xl-2 index-div2-he">
            <img class="w-100 h-100" src="./images/index/4.jpg" alt="" />
        </div>
    </div>
    <div class="index-everydiv-he"><img class="w-100" src="./images/index/本周新品.jpg" alt="" /></div>

    <!-- 热卖爆款 -->

    <div class="row no-gutters baokuang-center">
        <div class="col-12">
            <h3>- 热卖爆款 -</h3>
        </div>

        <!-- 第一个 -->
        <div class="col-sm-12 col-xl-6 inde-left-div bk-binimg">
            <img class="w-100" src="./images/index/2带.jpg" alt="" />
        </div>
        <!-- 第二个 -->
        <div class="col-sm-12 col-xl-6 row no-gutters inde-right-div">
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/m303 (1).png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/hd458.png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/hd450bt.png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/07 (1).png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
        </div>

        <div class="col-12">
            <h3>- 外出便携 -</h3>
        </div>
        <!-- 第一个 -->

        <div class="col-sm-12 col-xl-6 row no-gutters inde-right-div">
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/IE-60.png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/1000x1000-1 .png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/1KKAS .png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
            <div class="baokuang-xiaohc m-0 bk-smimg">
                <img class="" src="./images/index/cx350-(3) (1).png" alt="" />

                <p>M3AEBTXL SANDY WHITE</p>
                <span>￥2,999</span>
            </div>
        </div>
        <!-- 第二个 -->
        <div class="col-sm-12 col-xl-6 inde-left-div bk-binimg">
            <img class="w-100" src="./images/index/ie40.jpg" alt="" />
        </div>
    </div>
    <h3>- 专属配件 -</h3>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 轮播第一张 -->
            <div class="swiper-slide">
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>MOMENTUM Wireless 三代耳垫</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/3代耳垫-黑 (1).png" alt="" />
                    </div>
                </div>
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>Momentum In-Ear（M号）耳垫</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/3610-0001.png" alt="" />
                    </div>
                </div>
            </div>
            <!-- 轮播第2张 -->
            <div class="swiper-slide">
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>真无线二代黑色充电盒</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/ietw-2b03.png" alt="" />
                    </div>
                </div>
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>真无线二代白色右单元-R</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/ietw-2b02.png" alt="" />
                    </div>
                </div>
            </div>
            <!-- 轮播第3张 -->
            <div class="swiper-slide">
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>真无线二代黑色左单元-L</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/ietw-2h1 (1).png" alt="" />
                    </div>
                </div>
                <div class="swiper-itemWH-flex">
                    <div class="item-lf">
                        <div class="item-lf-abs">
                            <p>真无线一代充电盒</p>
                            <span class="index-btn-buy">点击购买 >></span>
                        </div>
                    </div>
                    <div class="item-rt">
                        <img src="./images/index/h 3.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button1 swiper-button-next"></div>
        <div class="swiper-button1 swiper-button-prev"></div>
    </div>
    <!-- Swiper JS -->
    <script src="./swiper-master/package/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
    <h3>- 新品速递 -</h3>
    <div class="video-re">
        <div class="main">
            <a href="javascript:;" class="video" id="video"><img class="w-100" src="./images/index/视频封面.jpg" alt="" /></a>
        </div>
        <div class="video-btn" id="video-btn">
            <div class="video-area" id="video-area"></div>
        </div>
        <div id="shadow"></div>
    </div>

    <script>
        var obtn = document.getElementById('video')
        var ovideo = document.getElementById('video-btn')
        var oatn = document.getElementById('video-area')
        var oshadow = document.getElementById('shadow')
        obtn.onclick = function() {
            ovideo.style.display = 'block'
            oshadow.style.display = 'block'
            oatn.innerHTML =
                '<video controls id="videoPlay1" src="./images/index/1.mp4" poster="" loop="loop" x-webkit-airplay="true" webkit-playsinline="true" oncontextmenu="return false"></video>'
            var video1 = document.getElementById('videoPlay1')
            video1.onclick = function() {
                if (video1.paused) {
                    video1.play()
                } else {
                    video1.pause()
                }
            }
        }
        oshadow.onclick = function() {
            ovideo.style.display = 'none'
            oshadow.style.display = 'none'
        }
    </script>
    <div class="inde-finili-top">
        <div class="inde-finili-top-con">新闻动态</div>
    </div>

    <div class="inde-finili">
        <a class="" href="#">
            <div><img src="./images/index/bottom_img1.png" /></div>
            <p>声音玩家进阶指南</p>
        </a>
        <a href="#">
            <div><img src="./images/index/20201223102747_8940.jpg" /></div>
            <p>会员日实力宠粉，重重惊喜音你而来</p>
        </a>
        <a href="#">
            <div><img src="./images/index/bottom_img3.jpg" /></div>
            <p>新品上市｜亚洲首发，给你“聆听自由”</p>
        </a>
    </div>

    <!-- 尾部 -->
    <iframe src="./footer.html" width="100%" frameborder="0" scrolling="no" height="414px"></iframe>

    <script src="./js/head.js"></script>
    <script src="./js/carousel.js"></script>
</body>

</html>